<template>
  <div class="container">
    <div class="page-header">
      <h1>💬 意见反馈</h1>
      <p style="color: #666; font-size: 14px; margin: 8px 0 0 0;">
        您的建议对我们很重要
      </p>
    </div>

    <div class="form-container">
      <a-form 
        :model="feedbackForm" 
        :rules="rules" 
        ref="feedbackFormRef"
        layout="vertical"
        size="large"
      >
        <a-form-item label="反馈类型" field="type">
          <a-select 
            v-model="feedbackForm.type" 
            placeholder="请选择反馈类型"
          >
            <a-option label="🐛 Bug反馈" value="bug" />
            <a-option label="💡 功能建议" value="feature" />
            <a-option label="🎨 界面优化" value="ui" />
            <a-option label="📚 文档问题" value="docs" />
            <a-option label="❓ 其他问题" value="other" />
          </a-select>
        </a-form-item>

        <a-form-item label="问题标题" field="title">
          <a-input
            v-model="feedbackForm.title"
            placeholder="请简要描述问题"
            allow-clear
          />
        </a-form-item>

        <a-form-item label="详细描述" field="description">
          <a-textarea
            v-model="feedbackForm.description"
            :rows="4"
            placeholder="请详细描述问题或建议，包括操作步骤、期望结果等"
            allow-clear
          />
        </a-form-item>

        <a-form-item label="优先级" field="priority">
          <a-radio-group v-model="feedbackForm.priority">
            <a-radio value="low">🔵 低</a-radio>
            <a-radio value="medium">🟡 中</a-radio>
            <a-radio value="high">🔴 高</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="联系方式">
          <a-input
            v-model="feedbackForm.contact"
            placeholder="邮箱或手机号（选填）"
            allow-clear
          />
          <div style="color: #999; font-size: 12px; margin-top: 4px;">
            便于我们联系您获取更多信息或反馈处理结果
          </div>
        </a-form-item>

        <a-form-item label="截图上传">
          <a-upload
            drag
            :auto-upload="false"
            :file-list="fileList"
            multiple
            accept="image/*"
            @change="handleFileChange"
          >
            <template #upload-area>
              <div class="upload-area">
                <div style="font-size: 48px; color: #409eff; margin-bottom: 16px;">📷</div>
                <div class="arco-upload-tip">
                  将文件拖到此处，或<span style="color: #409eff;">点击上传</span>
                </div>
                <div class="arco-upload-tip" style="margin-top: 8px;">
                  支持 jpg/png 格式，单个文件不超过 5MB
                </div>
              </div>
            </template>
          </a-upload>
        </a-form-item>

        <a-form-item>
          <a-button 
            type="primary" 
            long
            size="large"
            :loading="loading"
            @click="handleSubmit"
          >
            {{ loading ? '提交中...' : '提交反馈' }}
          </a-button>
        </a-form-item>
      </a-form>
    </div>

    <div class="recent-feedback">
      <a-card hoverable>
        <template #title>
          <span>最近反馈</span>
        </template>
        <div v-if="recentFeedbacks.length === 0" style="text-align: center; color: #999; padding: 20px;">
          暂无反馈记录
        </div>
        <div v-else>
          <div 
            v-for="item in recentFeedbacks" 
            :key="item.id"
            class="feedback-item"
          >
            <div class="feedback-header">
              <span class="feedback-title">{{ item.title }}</span>
              <a-tag :color="getTagColor(item.status)" size="small">
                {{ getStatusText(item.status) }}
              </a-tag>
            </div>
            <div class="feedback-meta">
              <span class="feedback-type">{{ getTypeText(item.type) }}</span>
              <span class="feedback-time">{{ formatDate(item.createTime) }}</span>
            </div>
          </div>
        </div>
      </a-card>
    </div>

    <div class="btn-group" style="margin-top: 30px;">
      <button class="nav-btn secondary" @click="$router.push('/')">
        返回首页
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Message } from '@arco-design/web-vue'

const feedbackFormRef = ref()
const loading = ref(false)
const fileList = ref([])
const recentFeedbacks = ref([])

const feedbackForm = reactive({
  type: '',
  title: '',
  description: '',
  priority: 'medium',
  contact: ''
})

const rules = {
  type: [
    { required: true, message: '请选择反馈类型' }
  ],
  title: [
    { required: true, message: '请输入问题标题' },
    { minLength: 5, maxLength: 100, message: '标题长度在 5 到 100 个字符' }
  ],
  description: [
    { required: true, message: '请详细描述问题' },
    { minLength: 10, maxLength: 1000, message: '描述长度在 10 到 1000 个字符' }
  ],
  priority: [
    { required: true, message: '请选择优先级' }
  ]
}

onMounted(() => {
  loadRecentFeedbacks()
})

const handleFileChange = (fileList, file) => {
  console.log('文件变更:', fileList, file)
}

const handleSubmit = async () => {
  if (!feedbackFormRef.value) return
  
  try {
    await feedbackFormRef.value.validate()
    loading.value = true
    
    // 模拟提交反馈
    setTimeout(() => {
      loading.value = false
      Message.success('反馈提交成功！我们会尽快处理您的问题')
      
      // 重置表单
      feedbackFormRef.value.resetFields()
      fileList.value = []
      
      // 重新加载反馈列表
      loadRecentFeedbacks()
    }, 2000)
    
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

const loadRecentFeedbacks = () => {
  // 模拟加载最近反馈数据
  setTimeout(() => {
    recentFeedbacks.value = [
      {
        id: 1,
        type: 'bug',
        title: '登录后页面白屏问题',
        status: 'processing',
        createTime: '2024-01-15 14:30'
      },
      {
        id: 2,
        type: 'feature',
        title: '希望增加夜间模式',
        status: 'resolved',
        createTime: '2024-01-14 09:20'
      }
    ]
  }, 500)
}

const getTypeText = (type) => {
  const typeMap = {
    bug: '🐛 Bug反馈',
    feature: '💡 功能建议',
    ui: '🎨 界面优化',
    docs: '📚 文档问题',
    other: '❓ 其他问题'
  }
  return typeMap[type] || type
}

const getStatusText = (status) => {
  const statusMap = {
    pending: '待处理',
    processing: '处理中',
    resolved: '已解决',
    closed: '已关闭'
  }
  return statusMap[status] || status
}

const getTagColor = (status) => {
  const colorMap = {
    pending: 'gray',
    processing: 'orange',
    resolved: 'green',
    closed: 'blue'
  }
  return colorMap[status] || 'gray'
}

const formatDate = (dateStr) => {
  return dateStr
}
</script>

<style scoped>
.form-container {
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.upload-area {
  text-align: center;
  padding: 40px 20px;
  border: 2px dashed #d9d9d9;
  border-radius: 6px;
  transition: border-color 0.3s;
}

.upload-area:hover {
  border-color: #409eff;
}

.recent-feedback {
  margin-bottom: 20px;
}

.feedback-item {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.feedback-item:last-child {
  border-bottom: none;
}

.feedback-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.feedback-title {
  font-weight: 500;
  color: #333;
}

.feedback-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #999;
}

.feedback-type {
  color: #666;
}
</style> 